<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>首页-Layui</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="stylesheet" href="../static/layui/css/layui.css"  media="all">
        <style type="text/css">
            body{padding:0;margin:0;}
            div{box-sizing: border-box;}
            .layui-side .layui-icon{
                margin-right:5px;
            }
            .layui-footer{
                text-align: center;
            }
            @keyframes fade-out {
                from {left: 0;}
                to {left: -200px;}
            }
            @keyframes fade-left{
                from{left:200px;}
                to{left:0;}
            }
            .layui-nav-fade-out{ 
                animation: fade-out 0.5s linear;
                
                animation-fill-mode: forwards;
            }
            .layui-body-fade-left{
                animation: fade-left 0.5s linear;
                animation-fill-mode: forwards;
            }
            @keyframes fade-in {
                from {left: -200px;}
                to {left: 0;}
            }
            @keyframes fade-right{
                from{left:0;}
                to{left:200px;}
            }
            .layui-nav-fade-in{
                animation: fade-in 0.5s linear;
                animation-fill-mode: forwards;
            }
            .layui-body-fade-right{
                animation: fade-right 0.5s linear;
                animation-fill-mode: forwards;
            }
           /* @media screen and (max-width: 970px) {
                @keyframes slideOut {
                    from {left: 0;}
                    to {left: -100%;}
                }
                .layui-side{animation: slideOut 1s;animation-fill-mode: forwards;}
                
            }
            @media screen and (min-width: 970px) {
                @keyframes slideIn {
                    from {left: -100%;}
                    to {left: 0;}
                }
                .layui-side{animation: slideIn 1s;animation-fill-mode: forwards;}
            }*/
            
        </style>
    </head>
    <body>
        <!--Layui 布局-->
        <div class="layui-layout layui-layout-admin">
            <!--头部-->
            <div class="layui-header">
                <!--logo-->
                <div class="layui-logo layui-hide-xs layui-bg-black">Nova Demo</div>
                <!-- 头部区域左侧 -->
                <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                    <li class="layui-nav-item" lay-header-event="menuLeft">
                        <i class="layui-icon layui-icon-shrink-right"></i>
                    </li>
                </ul>
                <!-- 头部区域右侧 -->
                <ul class="layui-nav layui-layout-right" style="cursor:pointer;">
                    <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                        <a href="javascript:;">
                            <img src="../static/images/header.jpg" class="layui-nav-img">
                            射手座爱人
                        </a>
                        <dl class="layui-nav-child">
                            <dd><a href="javascript:;">个人资料</a></dd>
                            <dd><a href="javascript:;">设置</a></dd>
                            <dd><a href="javascript:;">注销</a></dd>
                        </dl>
                    </li>
                    <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                        <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                        </a>
                    </li>
                </ul>
            </div>
            <!--侧边栏-->
            <div class="layui-side layui-bg-black">
                <div class="layui-side-scroll">
                    <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                    <ul class="layui-nav layui-nav-tree" lay-accordion="true" lay-filter="menu">
                        
                    </ul>
                </div>
            </div>
            <!--主体内容-->
            <div class="layui-body">
                <!-- 内容主体区域 -->
                <div style="padding: 15px;">
                <blockquote class="layui-elem-quote layui-text">
                    Layui 框体布局内容主体区域
                </blockquote>
                <div class="layui-card layui-panel">
                    <div class="layui-card-header">
                    下面是充数内容，为的是出现滚动条
                    </div>
                    <div class="layui-card-body">
                    充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>充数内容<br>你还真滑到了底部呀
                    </div>
                </div>
                <br><br>
                </div>
            </div>
            <div class="layui-footer">
                <!-- 底部固定区域 -->
                Copyright &copy; 2025 Nova Demo
            </div>
        </div>
            
        <script src="../static/layui/layui.js"></script>
        <script>

            if(window.innerWidth < 970){
                    layui.$(".layui-side").css("left","-100%");
                    layui.$(".layui-icon-shrink-right").addClass("layui-icon-spread-left");
                    layui.$(".layui-body").css("left",0);
                    
                }
            //JS 
            layui.use(['element', 'layer', 'util'], function(){
                let element = layui.element;
                let layer = layui.layer;
                let util = layui.util;
                let $ = layui.$;

                 // 导航点击事件
                element.on('nav(menu)', function(elem){
                    console.log(elem); // 得到当前点击的元素 jQuery 对象
                    if(elem.next('.layui-nav-child').length > 0){

                    }else{
                    layer.msg(elem.text());
                    layer.msg(elem.attr('url'));
                    layer.msg(elem.attr('id'));
                    }
                });
                    
                //头部事件
                util.event('lay-header-event', {
                    menuLeft: function(othis){ // 左侧菜单事件
                        if(othis.children(0).hasClass('layui-icon-spread-left')){
                            
                            $(".layui-icon-spread-left").addClass("layui-icon-shrink-right");
                            $(".layui-icon-shrink-right").removeClass("layui-icon-spread-left");
                            $(".layui-side").addClass("layui-nav-fade-in");
                            $(".layui-side").removeClass("layui-nav-fade-out");
                            $(".layui-body").addClass("layui-body-fade-right");
                            $(".layui-body").removeClass("layui-body-fade-left");
                            $(".layui-footer").addClass("layui-body-fade-right");
                            $(".layui-footer").removeClass("layui-body-fade-left");
                            //$(".layui-side").removeClass("layui-hide");
                        }else{
                            $(".layui-icon-shrink-right").addClass("layui-icon-spread-left");
                            $(".layui-icon-spread-left").removeClass("layui-icon-shrink-right");
                            $(".layui-side").addClass("layui-nav-fade-out");
                            $(".layui-side").removeClass("layui-nav-fade-in");
                            $(".layui-body").addClass("layui-body-fade-left");
                            $(".layui-body").removeClass("layui-body-fade-right");
                            $(".layui-footer").addClass("layui-body-fade-left");
                            $(".layui-footer").removeClass("layui-body-fade-right");
                            //$(".layui-side").addClass("layui-hide");
                        }
                    },
                    menuRight: function(){  // 右侧菜单事件
                    layer.open({
                        type: 1,
                        title: '更多',
                        content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                        area: ['260px', '100%'],
                        offset: 'rt', // 右上角
                        anim: 'slideLeft', // 从右侧抽屉滑出
                        shadeClose: true,
                        scrollbar: false
                    });
                    }
                });
            
           $(function () {
           
                
            //动态加载左侧菜单栏
                $.ajax({
                    url: '../data/menu.json',
                    dataType: 'json',
                    success: function (data) {
                        let obj = data;
                        let menuStr = '';
                        for (let i = 0; i < obj.length; i++) {
                            if (obj[i].name === '首页') {
                                menuStr += '<li class="layui-nav-item layui-this"><a href="javascript:;" id="'+obj[i].code+'" url="'+obj[i].url+'"><i class="'+obj[i].icon+'"></i>' + obj[i].name + '</a></li>';
                            } else if (obj[i].children && obj[i].children.length > 0) {
                                menuStr += '<li class="layui-nav-item"><a href="javascript:;"><i class="'+obj[i].icon+'"></i>' + obj[i].name + '</a>';
                                menuStr += '<dl class="layui-nav-child">';
                                for (let j = 0; j < obj[i].children.length; j++) {
                                    menuStr += '<dd><a href="javascript:;"<a href="javascript:;" id="'+obj[i].children[j].code+'" url="'+obj[i].children[j].url+'"><i class="'+obj[i].children[j].icon+'"></i>' + obj[i].children[j].name + '</a></dd>';
                                }
                                menuStr += '</dl></li>';
                            } else {
                                menuStr += '<li class="layui-nav-item"><a href="javascript:;" id="'+obj[i].code+'" url="'+obj[i].url+'"><i class="'+obj[i].icon+'"></i>' + obj[i].name + '</a></li>';
                            }

                        }
                        $('.layui-nav-tree').html(menuStr);
                        element.render('nav','menu');
                    },
                    error: function () {
                        layer.msg('菜单加载失败！');
                    }
                })
                
            });

            
            function handleWidthChange(e) {
                if (e.matches) { // 如果媒体查询匹配当前窗口大小，则执行操作
                    $(".layui-icon-shrink-right").addClass("layui-icon-spread-left");
                    $(".layui-icon-spread-left").removeClass("layui-icon-shrink-right");
                    $(".layui-side").addClass("layui-nav-fade-out");
                     $(".layui-side").removeClass("layui-nav-fade-in");
                     $(".layui-body").addClass("layui-body-fade-left");
                    $(".layui-body").removeClass("layui-body-fade-right");
                    $(".layui-footer").addClass("layui-body-fade-left");
                    $(".layui-footer").removeClass("layui-body-fade-right");
                } else {
                    $(".layui-icon-spread-left").addClass("layui-icon-shrink-right");
                    $(".layui-icon-shrink-right").removeClass("layui-icon-spread-left");
                    $(".layui-side").addClass("layui-nav-fade-in");
                    $(".layui-side").removeClass("layui-nav-fade-out");
                    $(".layui-body").addClass("layui-body-fade-right");
                     $(".layui-body").removeClass("layui-body-fade-left");
                     $(".layui-footer").addClass("layui-body-fade-right");
                     $(".layui-footer").removeClass("layui-body-fade-left");
                    
                }
            }
            
            const mediaQuery = window.matchMedia('(max-width: 969px)'); // 媒体查询，宽度小于600px时触发
            mediaQuery.addListener(handleWidthChange); // 添加监听器，当媒体查询状态变化时调用handleWidthChange函数
            //handleWidthChange(mediaQuery);
        });
        
        </script>

    </body>
</html>